<!--------------------------------
 - @Author: Ronnie Zhang
 - @LastEditor: Ronnie Zhang
 - @LastEditTime: 2023/12/05 21:29:56
 - @Email: zclzone@outlook.com
 - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
 --------------------------------->

<template>
  <CommonPage>
    <template #action>
      <!--      <n-button v-permission="'AddUser'" type='primary' @click='handleAdd()'>-->
      <!--        <i class='i-material-symbols:add mr-4 text-18' />-->
      <!--        创建新用户-->
      <!--      </n-button>-->
    </template>

    <MeCrud
      ref='$table'
      v-model:query-items='queryItems'
      :scroll-x='1200'
      :columns='columns'
      :get-data='api.read'
    >


      <MeQueryItem label='一级类目' :label-width='100'>
        <n-select v-model:value='queryItems.type1' clearable :options='lists.type1.value'
                  label-field='label'
                  value-field='value' filterable />
      </MeQueryItem>


    </MeCrud>

  </CommonPage>
</template>

<script setup>
import { NAvatar, NButton, NImage, NSwitch, NTag } from 'naive-ui'
import { formatDateTime } from '@/utils'
import { MeCrud, MeQueryItem, MeModal } from '@/components'
import { useCrud } from '@/composables'
import api from './api'

defineOptions({ name: 'UserMgt' })

const $table = ref(null)
/** QueryBar筛选参数（可选） */
const queryItems = ref({})

onMounted(() => {
  $table.value?.handleSearch()
})

const lists = {
  type1: ref([])
}

const getAllType = (type) => {
  api.requestAllType(type).then(res => {
    lists[`type${type}`].value = res.data
  })
}

onMounted(() => {
  getAllType(1)
})

const columns = [

  { title: '店铺排名', fixed: 'left', key: 'rankNumber', width: 50, ellipsis: { tooltip: true } },
  { title: '一级分类', fixed: 'left', key: 'type1', width: 100, ellipsis: { tooltip: true } },
  { title: '店铺名称', key: 'shopName', width: 100, ellipsis: { tooltip: true } },
  { title: '店铺总销量', key: 'saleCount', width: 80, ellipsis: { tooltip: true } },
  {
    title: '店铺地址',
    key: 'shopUrl',
    width: 180,
    ellipsis: { tooltip: true },
    render(row) {
      return h('a', {
        href: row['shopUrl'],
        target: '_blank'
      }, row['shopUrl'])
    }
  }

]

const {
  modalRef,
  modalFormRef,
  modalForm,
  modalAction,
  handleAdd,
  handleDelete,
  handleOpen,
  handleSave
} = useCrud({
  name: '用户',
  initForm: { enable: true },
  refresh: () => $table.value?.handleSearch()
})


</script>
